<div class="container">
	<div class="row">
<style>
.affix{top:0px;background-color:#FFF;z-index:100;}
#left-sidebar .ui-portlet{margin:0px;}
#left-side-affix{border:1px solid #b6b6b6;box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
#left-sidebar .btn-group .btn{padding:4px 16px;}
ul.head-style-list li,ul.editor-template-list li{
	cursor: pointer;
	padding:15px 5px;border-top:1px solid #EFEFEF;
}
.head-style-list li:hover,.editor-template-list li:hover{
	background-color:#efefef;
}
</style>
	<div id="left-sidebar" class="col-sm-3 hidden-xs hidden-print">
		<div id="left-side-affix" data-spy="affix" data-offset-top="60">
			
		<ul class="nav nav-tabs" role="tablist">		  
		  <li class="active"><a href="#editor-templates" role="tab" data-toggle="tab">插入模板</a></li>
		  <li><a href="#editor-styles" role="tab" data-toggle="tab">样式设置</a></li>
		</ul>

		<!-- Tab panes -->
		<div class="tab-content">
		  <div class="tab-pane active" id="editor-templates" style="padding:5px;height:520px;overflow-y:auto;">
		  	<div class="label label-warning" role="alert">提示：点击模板，将自动插入内容到编辑器</div>
		  		<portlet ulclass="editor-template-list" title="{{lang('editor_templates')}}" portlet="notitle" list_tpl="inner" limit="50" model="EditorStyle" recursive="-1" order="view_nums desc" info="recursive=-1&fields[0]=content&fields[1]=name&fields[2]=summary&fields[3]=id&order=view_nums desc">
						<li title="点击插入版式内容">{{$item['content']}}</li>
				</portlet>
		  </div>

		  <div class="tab-pane" id="editor-styles" style="padding:5px;height:520px;overflow-y:auto;">
		  		<div id="editor-type-pop" data-container="body" data-toggle="popover" data-placement="bottom" data-content="选择将样式应用到标题、引用、段落等内容项">
			    	<div class="btn-group"  data-toggle="buttons">
					  <label class="btn btn-default active">
					    <input type="radio" name="options" value="h1,h2,h3,h4,h5,h6" checked> 标题
					  </label>
					  <label class="btn btn-default">
					    <input type="radio" name="options" value="blockquote"> 引用
					  </label>
					  <label class="btn btn-default">
					    <input type="radio" name="options" value="div,p"> 段落
					  </label>
					</div>
				</div>
				<div class="label label-warning" role="alert">点击样式时，将修改文章内容中当前行或段落的样式</div>
					<portlet ulclass="head-style-list" title="{{lang('editor_styles')}}" portlet="notitle" list_tpl="inner" limit="50" model="EditorStyle" recursive="-1" order="view_nums desc" info="recursive=-1&fields[0]=content&fields[1]=name&fields[2]=summary&fields[3]=id&conditions[cate_id]=1&order=view_nums desc">
						<li title="点击调整格式" data-style='{{$item['summary']}}'>{{$item['content']}}</li>
					</portlet>

		  </div>
		  
		</div>
			
		</div>
	</div>
	<div class="col-sm-8">
	{{$this->Form->create('WxMsg',array('class'=>'form-horizontal','role'=>'form'))}}		
		<div class="form-group" id="divWxMsgUrl">
			<div class="col-sm-12 controls">
				{{$this->Form->input('content',array('class'=>'form-control','div'=>false,'label'=>false,'rows'=>'3','after'=>'<p>将编辑好的内容全选复制到微信编辑后台。</p>'))}}
			</div>
		</div>
	{{$this->Form->end()}}
	</div>
  </div>

{{$this->Html->script(array(
	'ckeditor/ckeditor.js',
))}}

<script>
$(function(){

	$('#editor-type-pop').popover({
	  trigger: 'hover'
	});
});

var current_ckeditor_instance = null;

$(function(){
	$('#left-side-affix').width($('#left-sidebar').width());

	
	ckeditors['WxMsgContent'] = CKEDITOR.replace( 'WxMsgContent',
		    {
		        customConfig : '{{$this->Html->url("/js/ckeditor/front-config.js")}}',
		        toolbar : 'ANONY',
		        extraPlugins : 'autogrow',
		        height:500,
		        autoGrow_minHeight : 500
		    });
	
	ckeditors['WxMsgContent'].on('focus',function(e){
		current_ckeditor_instance = e.editor;
	});
	
	window.onbeforeunload = function(event){   
		if(ckeditors['WxMsgContent'].getData() != ""){   
			event.returnValue = "即将离开页面，是否真的不保存？";   
		}   
	} 
	CKEDITOR.on( 'instanceReady', function( e ){
		/*e.editor.document.appendStyleSheet( '{{$this->Html->url("/stylevars/getcss.css")}}' );
		e.editor.document.appendStyleSheet( '{{$this->Html->url("/css/ui-customer.css")}}' );
		//e.editor.setMode( 'source' );
		e.editor.on( 'mode', function( e ){
			if(e.editor.mode == 'wysiwyg'){
				e.editor.document.appendStyleSheet( '{{$this->Html->url("/stylevars/getcss.css")}}' );
				e.editor.document.appendStyleSheet( '{{$this->Html->url("/css/ui-customer.css")}}' );
			}
		});*/
		$('.cke_top').width($('.cke_top').width());
		$('.cke_top').addClass('clearfix').affix({offset:{top: 60}});
	});


	$('.head-style-list li').click(function(){
		var styles = $(this).data('style');
		//alert(style_str)
		//var styles = jQuery.parseJSON(style_str);
		set_style(styles);

	});

	$('.editor-template-list li').click(function(){
		insertHtml($(this).html() + "<p>&nbsp;</p>"); //多插入一个空行，防止有时无法选择到底部了
	})

});

function insertHtml(html){
	if(!current_ckeditor_instance){
		ckeditors['WxMsgContent'].focus();
	}

	if(current_ckeditor_instance){
		var oEditor = current_ckeditor_instance;
		// Check the active editing mode.
		if (oEditor.mode == 'wysiwyg' ){
			// Insert the desired HTML.
			oEditor.insertHtml(html);
		}
		else{
			alert($.jslanguage.wysiswyg_mode );
		}
	}
	else{	
		alert($.jslanguage.select_editor);
	}	
}

function set_style(styles){
	//ckeditors['WxMsgContent'].focus();
	//ckeditors['WxMsgContent'].execCommand('selectAll');
	// 应用到编辑器的单项
	var style = new CKEDITOR.style( { element: 'div', styles: styles} );
	ckeditors['WxMsgContent'].applyStyle( style );

	//应用到全部内容，会修改后重置，撤销操作会失效
	/*var html = ckeditors['WxMsgContent'].getData();	
	var obj = $('<div id="editor-content">'+html+"</div>");
	obj.find(selector).each(function(){
		$(this).removeAttr('style');
		$(this).css(styles);
	});
	ckeditors['WxMsgContent'].setData(obj.html());*/

}
</script>

</div>
